<template>
	<div class="my-page">
		<!-- 头像和昵称卡片 -->
		<div class="user-card">
			<img :src="face" alt="头像" class="avatar" @click="setFace">
			<!-- 修正 v-html 指令的使用 -->
			<div class="nickname" v-html="username"></div>
		</div>
		<!-- 功能选项 -->
		<div class="function-list">
			<div class="function-item" @click="navigateTo('/pages/myCourse/index')">
				去学习
				<span class="red-exclamation">!</span>
			</div>
			<div class="function-item" @click="navigateTo('/pages/certificate/index')">我的证书</div>
			<div class="function-item" @click="navigateTo('/pages/group/index')">我的班组</div>
			<div class="function-item" @click="navigateTo('/pages/setting/index')">设置</div>
			<div class="function-item" v-if="isAdmin" @click="navigateTo('/pages/resources/index')">资源配置</div>
			<div class="function-item" v-if="isAdmin" @click="navigateTo('/pages/setCourse/index')">分班分组</div>
			<div class="function-item" v-if="isAdmin" @click="navigateTo('/pages/diploma/index')">颁发证书</div>
			<div class="function-item" v-if="isAdmin" @click="navigateTo('/pages/setClass/index')">手动升班</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MyPage',
		data() {
			return {
				// 在 data 选项中定义数据属性
				username: '',
				userInfo: {},
				isAdmin: false,
				face: '',
				adminOpenIdList: [
					"oMyf267w9tktD98bxhLbAzwGrw54",
					"oMyf26zJjJeivIUFLeLb4x_I-ZjA",
					"oMyf266rYeW8a_jQuWEzfPnQH-D0",
					"oMyf26-xWv6zMN0Sw_5K2UliVdmU",
					"oMyf26_TqAJ4UGJHsoO9Qlhp2zOk"
				]
			};
		},
		methods: {
			navigateTo(url) {
				// 示例：使用 uni.navigateTo 进行页面跳转
				uni.navigateTo({
					url: url
				});
			},
			showAdminSetting() {
				if (uni.getStorageSync('userInfo').openId) {
					this.isAdmin = true;
				}
			},
			setFace() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0];
						uni.uploadFile({
							url: 'http://localhost:9090/file/upload',
							filePath: tempFilePaths,
							name: 'file',
							success: (uploadRes) => {
								if (uploadRes.statusCode === 200) {
									this.setFaceUrl(uploadRes.data)
								} else {
									console.error('上传失败，状态码:', uploadRes.statusCode);
								}
							},
							fail: (err) => {
								console.error('上传出错:', err);
							}
						});
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
					}
				});
			},
			setFaceUrl(url) {
				uni.request({
					url: 'http://localhost:9090/user/setFace',
					method: 'POST',
					data: {
						face: url,
						id: uni.getStorageSync('userInfo').id
					},
					success: (res) => {
						this.getLogin()
					},
					fail: (err) => {
						console.error('请求失败', err);
					}
				});
			},
			getLogin() {
				let userInfo = uni.getStorageSync('userInfo');
				if (userInfo == null) {
					uni.login({
						provider: 'weixin',
						success: (loginRes) => {
							if (loginRes.code) {
								const code = loginRes.code;
								uni.request({
									url: 'http://localhost:9090/user/login',
									method: 'GET',
									data: {
										code: code
									},
									success: (res) => {
										console.log(res.data.data);
										if (res.data.data != null) {
											uni.setStorageSync('userInfo', res.data.data); 
										} else {
											uni.navigateTo({
												url: '/pages/register/index',
											});
										}
									},
									fail: (err) => {
										console.error('请求失败', err);
									}
								});
							} else {
								console.error('获取 code 失败：', loginRes.errMsg);
							}
						},
						fail: (err) => {
							console.error('登录失败：', err);
						}
					});
				}
				userInfo = uni.getStorageSync('userInfo');
				uni.request({
					url: 'http://localhost:9090/user/getLoginUser',
					method: 'POST',
					data: {
						id: userInfo.id
					},
					header: {
						'Content-Type': 'application/json'
					},
					success: (res) => {
						if (res.statusCode === 200) {
							if (res.data.data != null) {
								uni.setStorageSync('userInfo', res.data.data);
								this.userInfo = res.data.data;
								this.username = res.data.data.name;
								this.face = res.data.data.face
								console.log(this.face)
							} else {
								uni.navigateTo({
									url: '/pages/register/index',
								});
							}
						} else {
							console.error('注册失败:', res.data);
						}
					},
					fail: (error) => {
						console.error('请求出错:', error);
					}
				});
			}
		},
		onShow() {
			this.getLogin();
			this.showAdminSetting();
		}
	};
</script>

<style scoped>
	.my-page {
		padding: 20px;
		background-color: #f4f4f4;
	}

	.user-card {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin-right: 20px;
	}

	.nickname {
		font-size: 20px;
		font-weight: bold;
	}

	.function-list {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.function-item {
		padding: 20px;
		border-bottom: 1px solid #eee;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.function-item:last-child {
		border-bottom: none;
	}

	.red-exclamation {
		color: red;
		font-size: 20px;
		font-weight: bold;
	}
</style>